<template lang="pug">
  v-data-table( :headers="headers"
    v-model="selected"
    show-select
    :options.sync="options"
    :items="items"
    loading-text="数据加载中..."
    no-data-text="未找到数据"
    :server-items-length="totalItems"
    :footer-props="footerProps"
    :loading="isLoading"
  )
    template(v-slot:item.action='{ item }')
      v-btn( depressed fab dark x-small color="primary" @click="$emit('edit', item)")
        v-icon(small) mdi-square-edit-outline
    template(v-slot:item.customer='{ item }')
      span {{ item.customer.name }}
    template(v-slot:item.status='{ item }')
      span {{ item.status.label }}
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import mixins from '../mixins/PaginateDataTableMixin'
  import {mapActions} from 'vuex'
  import {OrderLang} from '@/store/modules/types/Order'
  export default (Vue as VueConstructor<Vue & {

  }>).extend({
    name: 'order_data_table',
    mixins: [mixins],
    methods: {
      ...mapActions('order', {fetchData: 'list'})
    },
    data() {
      return {
        headers: [
          {text: "操作", value: 'action'},
          {text: OrderLang['order_number'], value: 'order_number'},
          {text: OrderLang['customer'], value: 'customer'},
          {text: OrderLang['net_amount'], value: 'net_amount'},
          {text: OrderLang['payable_amount'], value: 'payable_amount'},
          {text: OrderLang['status'], value: 'status'},
          {text: OrderLang['expected_rental_out_date'], value: 'expected_rental_out_date'},
          {text: OrderLang['expected_return_date'], value: 'expected_return_date'},
          {text: OrderLang['created_at'], value: 'created_at'},

        ]
      }
    }
  })
</script>
